$(() => {
  //  拖动线及拖动事件
  function lineMove(line, mark) {      //  line:折线图容器  mark：标记第几幅图来获取对应热力图数据
    let movePosition;
    // let heatMapData = data;      //  热力图数据
    let lineData = [];          //  折线图数据
    line.setOption({
      graphic: {
        type: 'rect',
        z: 100,
        shape: {
          width: 0,
          height: 10000
        },
        position: [line.convertToPixel({xAxisId: 'lineXPosition'}, firstPosition + 260), -5000],  //
        // position: [line.convertToPixel({xAxisId: 'heatMap'}, firstPosition), 0],
        draggable: true,
        style: {
          fill: 'rgba(0,0,0,0.3)',
          stroke: 'rgba(244,59,12,0.3)',
          lineWidth: 10
        },
        cursor: 'move',
        ondrag: onPointDragging
      }
    });

    function getLineData(num) {
      if (heatMapData.length > 0) {
        for (let i = 0; i < heatMapData[num].length; i++) {
          if (heatMapData[num].length > 0) {
            if (heatMapData[num][i][0] === movePosition) {
              lineData.push(heatMapData[num][i][2]);
            }
          }
        }
      }
    }

    function onPointDragging() {
      //阈值变动
      // movePosition = heat.convertFromPixel({xAxisId: 'heatMap'}, this.position[0]);
      movePosition = line.convertFromPixel({xAxisId: 'lineXPosition'}, this.position[0]);
      // movePosition1 = movePosition * 3 / 100;
      switch (mark) {
        case 1:
          getLineData(mark - 1);
          break;
        case 2:
          getLineData(mark - 1);
          break;
        case 3:
          getLineData(mark - 1);
          break;
        case 4:
          getLineData(mark - 1);
          break;
        case 5:
          getLineData(mark - 1);
          break;
        case 6:
          getLineData(mark - 1);
          break;
        case 7:
          getLineData(mark - 1);
          break;
        case 8:
          getLineData(mark - 1);
          break;
        case 9:
          getLineData(mark - 1);
          break;
        case 10:
          getLineData(mark - 1);
          break;
        case 11:
          getLineData(mark - 1);
          // getLineData(5);
          break;
        case 12:
          getLineData(mark - 1);
          break;
        case 13:
          getLineData(mark - 1);
          break;
        case 14:
          getLineData(mark - 1);
          break;
        case 15:
          getLineData(mark - 1);
          break;
        case 16:
          getLineData(mark - 1);
          break;
        case 17:
          getLineData(mark - 1);
          break;
        case 18:
          getLineData(mark - 1);
          break;
        case 19:
          getLineData(mark - 1);
          break;
        case 20:
          getLineData(mark - 1);
          break;
        case 21:
          getLineData(mark - 1);
          break;
        case 22:
          getLineData(mark - 1);
          break;
        case 23:
          getLineData(mark - 1);
          break;
        case 24:
          getLineData(mark - 1);
          break;
        case 25:
          getLineData(mark - 1);
          break;
        case 26:
          getLineData(mark - 1);
          break;
        case 27:
          getLineData(mark - 1);
          break;
        case 28:
          getLineData(mark - 1);
          break;
        case 29:
          getLineData(mark - 1);
          break;
        case 30:
          getLineData(mark - 1);
          // getLineData(6);
          break;
      }

      line.setOption({
        series: [{
          markLine: {
            data: [{xAxis: movePosition}]
          }
        }, {
          data: []
        }, {
          type: 'line',
          data: lineData
        }]
      });
      lineData.length = 0;
      //  设置拖动线的边界
      if (movePosition < 0) {
        line.setOption({
          graphic: {
            position: [line.convertToPixel({xAxisId: 'lineXPosition'}, 0), 0]  //
          }
        });
      } else if (movePosition > 137) {
        line.setOption({
          graphic: {
            position: [line.convertToPixel({xAxisId: 'lineXPosition'}, 137), 0]  //
          }
        });
      }
    }
  }

  //  处理后台传过来的数据
  function changeData(allData, firstRowData) {
    let result = [];
    for (let i = 0; i < allData[0].length; i++) {
      allData[0][i] = parseFloat(allData[0][i]);
    }
    for (let i = 1; i < firstRowData.length; i++) {     //  解析数据
      for (let j = 0; j < allData[0].length; j++) {
        let inData = [];
        inData.push((allData[0][j] * 100 / 3));     //  x轴坐标,0.03,0.06...变为1,2,...
        // inData.push(firstRowData[i]);    //  y轴坐标,第一行原始值
        inData.push(i - 1);     //  y轴坐标,0,1,2...
        if (allData[i][j] > 1 || allData[i][j] < 0) {   //  移除坏数据
          allData[i][j] = null;
        }
        inData.push(allData[i][j]);     //  数据值
        result.push(inData);
      }
    }
    for (let i = 0; i < result.length; i++) {      //  交换xy坐标
      let temp;
      temp = result[i][0];
      result[i][0] = result[i][1];
      result[i][1] = temp;
    }
    return result;
  }

  let xData = [];     //  x坐标
  let yData = [];     //  y坐标
  let heatMapData = [];       //  热力图数据
  let xTime = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00',
    '20:00', '21:00', '22:00', '23:00', '24:00'];
  //  添加x/y轴坐标
  for (let i = 0; i <= 136; i++) {
    xData.push(i);
  }
  for (let j = 0; j < 401; j++) {
    yData.push(j);
  }
  //  一级数据产品
  let heatMapPicL1_1 = echarts.init(document.getElementById('pic1')),
    heatMapPicL1_2 = echarts.init(document.getElementById('pic2')),
    heatMapPicL1_3 = echarts.init(document.getElementById('pic3')),
    heatMapPicL1_4 = echarts.init(document.getElementById('pic4')),
    heatMapPicL1_5 = echarts.init(document.getElementById('pic5')),
    heatMapPicL1_6 = echarts.init(document.getElementById('pic6')),
    heatMapPicL1_7 = echarts.init(document.getElementById('pic7')),
    heatMapPicL1_8 = echarts.init(document.getElementById('pic8')),
    heatMapPicL1_9 = echarts.init(document.getElementById('pic9')),
    heatMapPicL1_0 = echarts.init(document.getElementById('pic10')),
    //  二级数据产品
    heatMapPicL2_0 = echarts.init(document.getElementById('pic11')),
    heatMapPicL2_1 = echarts.init(document.getElementById('pic12')),
    heatMapPicL2_2 = echarts.init(document.getElementById('pic13')),
    heatMapPicL2_3 = echarts.init(document.getElementById('pic14')),
    heatMapPicL2_4 = echarts.init(document.getElementById('pic15')),
    heatMapPicL2_5 = echarts.init(document.getElementById('pic16')),
    heatMapPicL2_6 = echarts.init(document.getElementById('pic17')),
    heatMapPicL2_7 = echarts.init(document.getElementById('pic18')),
    heatMapPicL2_8 = echarts.init(document.getElementById('pic19')),
    heatMapPicL2_9 = echarts.init(document.getElementById('pic20')),
    heatMapPicL2_10 = echarts.init(document.getElementById('pic21')),
    heatMapPicL2_11 = echarts.init(document.getElementById('pic22')),
    heatMapPicL2_12 = echarts.init(document.getElementById('pic23')),
    heatMapPicL2_13 = echarts.init(document.getElementById('pic24')),
    heatMapPicL2_14 = echarts.init(document.getElementById('pic25')),
    heatMapPicL2_15 = echarts.init(document.getElementById('pic26')),
    heatMapPicL2_16 = echarts.init(document.getElementById('pic27')),
    heatMapPicL2_17 = echarts.init(document.getElementById('pic28')),
    heatMapPicL2_18 = echarts.init(document.getElementById('pic29')),
    //  三级数据产品
    heatMapPicL3_0 = echarts.init(document.getElementById('pic30'));
  //  图一类热力图设置
  let heatMapOption = {
    tooltip: {},
    grid: [ // 绘图区域设置
      {   //  heatMap
        x: 50,
        y: 15,
        x2: 30,
        y2: 25,
        left: 30
      }, {    //  line
        x: 50,
        y: 15,
        x2: 30,
        y2: 25,
        left: 30
      }],
    xAxis: [{   //  heatMap
      show: false,
      type: 'category',
      data: xData,
      gridIndex: 0,
      axisLine: {  //  轴线属性
        lineStyle: {
          color: '#fff'
        }
      },
      id: 'heatMap'
    }, {   //  line
      // show: false,
      type: 'category',
      data: xTime,                                        //  x轴时间
      max: 24, //  (x轴显示时间)
      axisLine: {  //  轴线属性
        lineStyle: {
          color: '#fff'
        }
      },
      gridIndex: 1
    }],
    yAxis: [{   //  heatMap
      show: false,
      type: 'category',
      data: yData,
      gridIndex: 0,
      axisLine: {  //  轴线属性
        lineStyle: {
          color: '#fff'
        }
      },
      id: 'heatMap'
    }, {    //  line
      // show: false,
      name: 'Height AGL [km]',
      nameLocation: 'center',
      type: 'category',
      data: yData,
      max: 12,
      axisLine: {  //  轴线属性
        lineStyle: {
          color: '#fff'
        }
      },
      gridIndex: 1,
      id: 'heatMap1'
    }],
    visualMap: [{   // 色标 bar
      min: 0,
      max: 1,
      itemHeight: 200,
      itemWidth: 10,
      calculable: false,  //  控制拖动
      realtime: false,
      text: ['1', '-1'],
      textStyle: {
        color: '#fff'
      },
      inRange: {
        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
      },
      top: 0,
      right: 0
    }],
    series: [{  //  heatMap
      type: 'heatmap',
      data: [],
      emphasis: {
        itemStyle: {
          borderColor: '#333',
          borderWidth: 1
        }
      },
      progressive: 1000,
      animation: false
    }, {  //  line
      type: 'line',
      data: []
    }]
  };
  //  一级数据产品
  heatMapPicL1_1.setOption(heatMapOption);
  heatMapPicL1_2.setOption(heatMapOption);
  heatMapPicL1_3.setOption(heatMapOption);
  heatMapPicL1_4.setOption(heatMapOption);
  heatMapPicL1_5.setOption(heatMapOption);
  heatMapPicL1_6.setOption(heatMapOption);
  heatMapPicL1_7.setOption(heatMapOption);
  heatMapPicL1_8.setOption(heatMapOption);
  heatMapPicL1_9.setOption(heatMapOption);
  heatMapPicL1_0.setOption(heatMapOption);
  //  二级数据产品
  heatMapPicL2_0.setOption(heatMapOption);
  heatMapPicL2_1.setOption(heatMapOption);
  heatMapPicL2_2.setOption(heatMapOption);
  heatMapPicL2_3.setOption(heatMapOption);
  heatMapPicL2_4.setOption(heatMapOption);
  heatMapPicL2_5.setOption(heatMapOption);
  heatMapPicL2_6.setOption(heatMapOption);
  heatMapPicL2_7.setOption(heatMapOption);
  heatMapPicL2_8.setOption(heatMapOption);
  heatMapPicL2_9.setOption(heatMapOption);
  heatMapPicL2_10.setOption(heatMapOption);
  heatMapPicL2_11.setOption(heatMapOption);
  heatMapPicL2_12.setOption(heatMapOption);
  heatMapPicL2_13.setOption(heatMapOption);
  heatMapPicL2_14.setOption(heatMapOption);
  heatMapPicL2_15.setOption(heatMapOption);
  heatMapPicL2_16.setOption(heatMapOption);
  heatMapPicL2_17.setOption(heatMapOption);
  heatMapPicL2_18.setOption(heatMapOption);
  //  三级数据产品
  heatMapPicL3_0.setOption(heatMapOption);

  //  一级数据产品
  let s_heatMapPicL1_1 = echarts.init(document.getElementById('s1_pic1')),
    s_heatMapPicL1_2 = echarts.init(document.getElementById('s1_pic2')),
    s_heatMapPicL1_3 = echarts.init(document.getElementById('s1_pic3')),
    s_heatMapPicL1_4 = echarts.init(document.getElementById('s1_pic4')),
    s_heatMapPicL1_5 = echarts.init(document.getElementById('s1_pic5')),
    s_heatMapPicL1_6 = echarts.init(document.getElementById('s1_pic6')),
    s_heatMapPicL1_7 = echarts.init(document.getElementById('s1_pic7')),
    s_heatMapPicL1_8 = echarts.init(document.getElementById('s1_pic8')),
    s_heatMapPicL1_9 = echarts.init(document.getElementById('s1_pic9')),
    s_heatMapPicL1_0 = echarts.init(document.getElementById('s1_pic10')),
    //  二级数据产品
    s_heatMapPicL2_0 = echarts.init(document.getElementById('s1_pic11')),
    s_heatMapPicL2_1 = echarts.init(document.getElementById('s1_pic12')),
    s_heatMapPicL2_2 = echarts.init(document.getElementById('s1_pic13')),
    s_heatMapPicL2_3 = echarts.init(document.getElementById('s1_pic14')),
    s_heatMapPicL2_4 = echarts.init(document.getElementById('s1_pic15')),
    s_heatMapPicL2_5 = echarts.init(document.getElementById('s1_pic16')),
    s_heatMapPicL2_6 = echarts.init(document.getElementById('s1_pic17')),
    s_heatMapPicL2_7 = echarts.init(document.getElementById('s1_pic18')),
    s_heatMapPicL2_8 = echarts.init(document.getElementById('s1_pic19')),
    s_heatMapPicL2_9 = echarts.init(document.getElementById('s1_pic20')),
    s_heatMapPicL2_10 = echarts.init(document.getElementById('s1_pic21')),
    s_heatMapPicL2_11 = echarts.init(document.getElementById('s1_pic22')),
    s_heatMapPicL2_12 = echarts.init(document.getElementById('s1_pic23')),
    s_heatMapPicL2_13 = echarts.init(document.getElementById('s1_pic24')),
    s_heatMapPicL2_14 = echarts.init(document.getElementById('s1_pic25')),
    s_heatMapPicL2_15 = echarts.init(document.getElementById('s1_pic26')),
    s_heatMapPicL2_16 = echarts.init(document.getElementById('s1_pic27')),
    s_heatMapPicL2_17 = echarts.init(document.getElementById('s1_pic28')),
    s_heatMapPicL2_18 = echarts.init(document.getElementById('s1_pic29')),
    //  三级数据产品
    s_heatMapPicL3_0 = echarts.init(document.getElementById('s1_pic30'));

  //  一级数据产品
  let s_linePicL1_1 = echarts.init(document.getElementById('s2_pic1')),
    s_linePicL1_2 = echarts.init(document.getElementById('s2_pic2')),
    s_linePicL1_3 = echarts.init(document.getElementById('s2_pic3')),
    s_linePicL1_4 = echarts.init(document.getElementById('s2_pic4')),
    s_linePicL1_5 = echarts.init(document.getElementById('s2_pic5')),
    s_linePicL1_6 = echarts.init(document.getElementById('s2_pic6')),
    s_linePicL1_7 = echarts.init(document.getElementById('s2_pic7')),
    s_linePicL1_8 = echarts.init(document.getElementById('s2_pic8')),
    s_linePicL1_9 = echarts.init(document.getElementById('s2_pic9')),
    s_linePicL1_0 = echarts.init(document.getElementById('s2_pic10')),
    //  二级数据产品
    s_linePicL2_0 = echarts.init(document.getElementById('s2_pic11')),
    s_linePicL2_1 = echarts.init(document.getElementById('s2_pic12')),
    s_linePicL2_2 = echarts.init(document.getElementById('s2_pic13')),
    s_linePicL2_3 = echarts.init(document.getElementById('s2_pic14')),
    s_linePicL2_4 = echarts.init(document.getElementById('s2_pic15')),
    s_linePicL2_5 = echarts.init(document.getElementById('s2_pic16')),
    s_linePicL2_6 = echarts.init(document.getElementById('s2_pic17')),
    s_linePicL2_7 = echarts.init(document.getElementById('s2_pic18')),
    s_linePicL2_8 = echarts.init(document.getElementById('s2_pic19')),
    s_linePicL2_9 = echarts.init(document.getElementById('s2_pic20')),
    s_linePicL2_10 = echarts.init(document.getElementById('s2_pic21')),
    s_linePicL2_11 = echarts.init(document.getElementById('s2_pic22')),
    s_linePicL2_12 = echarts.init(document.getElementById('s2_pic23')),
    s_linePicL2_13 = echarts.init(document.getElementById('s2_pic24')),
    s_linePicL2_14 = echarts.init(document.getElementById('s2_pic25')),
    s_linePicL2_15 = echarts.init(document.getElementById('s2_pic26')),
    s_linePicL2_16 = echarts.init(document.getElementById('s2_pic27')),
    s_linePicL2_17 = echarts.init(document.getElementById('s2_pic28')),
    s_linePicL2_18 = echarts.init(document.getElementById('s2_pic29')),
    //  三级数据产品
    s_linePicL3_0 = echarts.init(document.getElementById('s2_pic30'));

  let firstPosition = 50;     //  markLine初始位置

  //  图二类热力图设置
  let s_heatMapOption = {
    tooltip: {},
    grid: [{    //  左上
      x: 30,
      y: 30,
      y2: 25,
      right: "35%"
    }],
    xAxis: [{   //  左上
      show: false,
      type: 'category',
      data: xData,
      gridIndex: 0,
      id: 'heatMap'
    }],
    yAxis: [{
      show: false,
      type: 'category',
      data: yData,
      gridIndex: 0,
      axisLabel: {
        interval: 20   //  隔20个显示一个坐标
      },
      id: 'heatMap'
    }],
    visualMap: [{
      min: 0,
      max: 1,
      itemHeight: 200,
      itemWidth: 10,
      calculable: false,  //  控制拖动
      realtime: false,
      text: ['1', '-1'],
      textStyle: {
        color: '#fff'
      },
      inRange: {
        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
      },
      top: 0,
      right: 0
    }],
    series: [{  //  左上图
      type: 'heatmap',
      data: [],
      //  标识线
      emphasis: {
        itemStyle: {
          borderColor: '#333',
          borderWidth: 1
        }
      },
      progressive: 1000,
      animation: false
    }]
  };
  //  图二类热力图
  s_heatMapPicL1_1.setOption(s_heatMapOption);
  s_heatMapPicL1_2.setOption(s_heatMapOption);
  s_heatMapPicL1_3.setOption(s_heatMapOption);
  s_heatMapPicL1_4.setOption(s_heatMapOption);
  s_heatMapPicL1_5.setOption(s_heatMapOption);
  s_heatMapPicL1_6.setOption(s_heatMapOption);
  s_heatMapPicL1_7.setOption(s_heatMapOption);
  s_heatMapPicL1_8.setOption(s_heatMapOption);
  s_heatMapPicL1_9.setOption(s_heatMapOption);
  s_heatMapPicL1_0.setOption(s_heatMapOption);

  s_heatMapPicL2_0.setOption(s_heatMapOption);
  s_heatMapPicL2_1.setOption(s_heatMapOption);
  s_heatMapPicL2_2.setOption(s_heatMapOption);
  s_heatMapPicL2_3.setOption(s_heatMapOption);
  s_heatMapPicL2_4.setOption(s_heatMapOption);
  s_heatMapPicL2_5.setOption(s_heatMapOption);
  s_heatMapPicL2_6.setOption(s_heatMapOption);
  s_heatMapPicL2_7.setOption(s_heatMapOption);
  s_heatMapPicL2_8.setOption(s_heatMapOption);
  s_heatMapPicL2_9.setOption(s_heatMapOption);
  s_heatMapPicL2_10.setOption(s_heatMapOption);
  s_heatMapPicL2_11.setOption(s_heatMapOption);
  s_heatMapPicL2_12.setOption(s_heatMapOption);
  s_heatMapPicL2_13.setOption(s_heatMapOption);
  s_heatMapPicL2_14.setOption(s_heatMapOption);
  s_heatMapPicL2_15.setOption(s_heatMapOption);
  s_heatMapPicL2_16.setOption(s_heatMapOption);
  s_heatMapPicL2_17.setOption(s_heatMapOption);
  s_heatMapPicL2_18.setOption(s_heatMapOption);

  s_heatMapPicL3_0.setOption(s_heatMapOption);

  //  折线图设置
  let lineOption = {
    grid: [{    // 左
      x: 40,
      y: 30,
      y2: 25,
      left: 30,
      right: "35%"
    }, {    // 左覆盖
      x: 40,
      y: 30,
      y2: 25,
      left: 30,
      right: "35%"

    }, {    //  右
      y: 30,
      x2: 20,
      y2: 25,
      left: "70%"
    }, {    //  右覆盖
      y: 30,
      x2: 20,
      y2: 25,
      left: "70%"
    }],
    xAxis: [{   // 左
      show: false,
      type: 'category',
      data: xData,
      axisLine: {  //  轴线属性
        lineStyle: {
          color: '#fff'
        }
      },
      gridIndex: 0,
      id: 'lineXPosition'
    }, {   // 左覆盖
      // show: false,
      type: 'category',
      max: 24,
      data: xTime,
      axisLine: {  //  轴线属性
        lineStyle: {
          color: '#fff'
        }
      },
      gridIndex: 1
    }, {    //  右
      show: false,
      type: 'value',
      splitLine: {    //  网格线
        lineStyle: {
          type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
        },
        show: false
      },
      axisLine: {  //  轴线属性
        lineStyle: {
          color: '#fff'
        }
      },
      gridIndex: 2
    }, {    //  右覆盖
      // show: false,
      type: 'value',
      splitLine: {    //  网格线
        lineStyle: {
          type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
        },
        show: false
      },
      axisLine: {  //  轴线属性
        lineStyle: {
          color: '#fff'
        }
      },
      gridIndex: 3
    }],
    yAxis: [{   // 左
      show: false,
      type: 'category',
      data: yData,
      max: 12,
      axisLine: {  //  轴线属性
        lineStyle: {
          color: '#fff'
        }
      },
      gridIndex: 0,
      id: 'lineXPosition'
    }, {   // 左覆盖
      // show: false,
      name: 'Height AGL [km]',
      nameLocation: 'center',
      type: 'category',
      data: yData,
      max: 12,
      axisLine: {  //  轴线属性
        lineStyle: {
          color: '#fff'
        }
      },
      gridIndex: 1
    }, {    //  右
      show: false,
      type: 'category',
      data: yData,
      axisLine: {  //  轴线属性
        lineStyle: {
          color: '#fff'
        }
      },
      gridIndex: 2
    }, {    //  右覆盖
      type: 'category',
      data: yData,
      max: 12,
      axisLine: {  //  轴线属性
        lineStyle: {
          color: '#fff'
        }
      },
      gridIndex: 3
    }],
    series: [{
      data: [],
      type: 'line',
      markLine: {
        symbol: 'none',
        itemStyle: {
          normal: {
            borderWidth: 1,
            lineStyle: {
              type: 'solid',
              color: '#333 ',
              width: 2
            },
            label: {
              textStyle: {
                color: '#fff',
                fontSize: 16,
                fontWeight: "bolder"
              }
            }
          }
        },
        data: [
          {xAxis: firstPosition}
        ]
      }
    }, {    //  左覆盖
      data: [],
      type: 'line',
      xAxisIndex: 1,
      yAxisIndex: 1
    }, {    //  右
      data: [],
      type: 'line',
      xAxisIndex: 2,
      yAxisIndex: 2
    }, {     //  右覆盖
      data: [],
      type: 'line',
      xAxisIndex: 3,
      yAxisIndex: 3
    }]
  };
  //  图二类折线覆盖图
  s_linePicL1_1.setOption(lineOption);
  s_linePicL1_2.setOption(lineOption);
  s_linePicL1_3.setOption(lineOption);
  s_linePicL1_4.setOption(lineOption);
  s_linePicL1_5.setOption(lineOption);
  s_linePicL1_6.setOption(lineOption);
  s_linePicL1_7.setOption(lineOption);
  s_linePicL1_8.setOption(lineOption);
  s_linePicL1_9.setOption(lineOption);
  s_linePicL1_0.setOption(lineOption);

  s_linePicL2_0.setOption(lineOption);
  s_linePicL2_1.setOption(lineOption);
  s_linePicL2_2.setOption(lineOption);
  s_linePicL2_3.setOption(lineOption);
  s_linePicL2_4.setOption(lineOption);
  s_linePicL2_5.setOption(lineOption);
  s_linePicL2_6.setOption(lineOption);
  s_linePicL2_7.setOption(lineOption);
  s_linePicL2_8.setOption(lineOption);
  s_linePicL2_9.setOption(lineOption);
  s_linePicL2_10.setOption(lineOption);
  s_linePicL2_11.setOption(lineOption);
  s_linePicL2_12.setOption(lineOption);
  s_linePicL2_13.setOption(lineOption);
  s_linePicL2_14.setOption(lineOption);
  s_linePicL2_15.setOption(lineOption);
  s_linePicL2_16.setOption(lineOption);
  s_linePicL2_17.setOption(lineOption);
  s_linePicL2_18.setOption(lineOption);

  s_linePicL3_0.setOption(lineOption);

  //  echarts大对象
  let echartsObj = {
    pic1: heatMapPicL1_1,
    pic2: heatMapPicL1_2,
    pic3: heatMapPicL1_3,
    pic4: heatMapPicL1_4,
    pic5: heatMapPicL1_5,
    pic6: heatMapPicL1_6,
    pic7: heatMapPicL1_7,
    pic8: heatMapPicL1_8,
    pic9: heatMapPicL1_9,
    pic10: heatMapPicL1_0,
    pic11: heatMapPicL2_0,
    pic12: heatMapPicL2_1,
    pic13: heatMapPicL2_2,
    pic14: heatMapPicL2_3,
    pic15: heatMapPicL2_4,
    pic16: heatMapPicL2_5,
    pic17: heatMapPicL2_6,
    pic18: heatMapPicL2_7,
    pic19: heatMapPicL2_8,
    pic20: heatMapPicL2_9,
    pic21: heatMapPicL2_10,
    pic22: heatMapPicL2_11,
    pic23: heatMapPicL2_12,
    pic24: heatMapPicL2_13,
    pic25: heatMapPicL2_14,
    pic26: heatMapPicL2_15,
    pic27: heatMapPicL2_16,
    pic28: heatMapPicL2_17,
    pic29: heatMapPicL2_18,
    pic30: heatMapPicL3_0,
    s1_pic1: s_heatMapPicL1_1,
    s1_pic2: s_heatMapPicL1_2,
    s1_pic3: s_heatMapPicL1_3,
    s1_pic4: s_heatMapPicL1_4,
    s1_pic5: s_heatMapPicL1_5,
    s1_pic6: s_heatMapPicL1_6,
    s1_pic7: s_heatMapPicL1_7,
    s1_pic8: s_heatMapPicL1_8,
    s1_pic9: s_heatMapPicL1_9,
    s1_pic10: s_heatMapPicL1_0,
    s1_pic11: s_heatMapPicL2_0,
    s1_pic12: s_heatMapPicL2_1,
    s1_pic13: s_heatMapPicL2_2,
    s1_pic14: s_heatMapPicL2_3,
    s1_pic15: s_heatMapPicL2_4,
    s1_pic16: s_heatMapPicL2_5,
    s1_pic17: s_heatMapPicL2_6,
    s1_pic18: s_heatMapPicL2_7,
    s1_pic19: s_heatMapPicL2_8,
    s1_pic20: s_heatMapPicL2_9,
    s1_pic21: s_heatMapPicL2_10,
    s1_pic22: s_heatMapPicL2_11,
    s1_pic23: s_heatMapPicL2_12,
    s1_pic24: s_heatMapPicL2_13,
    s1_pic25: s_heatMapPicL2_14,
    s1_pic26: s_heatMapPicL2_15,
    s1_pic27: s_heatMapPicL2_16,
    s1_pic28: s_heatMapPicL2_17,
    s1_pic29: s_heatMapPicL2_18,
    s1_pic30: s_heatMapPicL3_0,
    s2_pic1: s_linePicL1_1,
    s2_pic2: s_linePicL1_2,
    s2_pic3: s_linePicL1_3,
    s2_pic4: s_linePicL1_4,
    s2_pic5: s_linePicL1_5,
    s2_pic6: s_linePicL1_6,
    s2_pic7: s_linePicL1_7,
    s2_pic8: s_linePicL1_8,
    s2_pic9: s_linePicL1_9,
    s2_pic10: s_linePicL1_0,
    s2_pic11: s_linePicL2_0,
    s2_pic12: s_linePicL2_1,
    s2_pic13: s_linePicL2_2,
    s2_pic14: s_linePicL2_3,
    s2_pic15: s_linePicL2_4,
    s2_pic16: s_linePicL2_5,
    s2_pic17: s_linePicL2_6,
    s2_pic18: s_linePicL2_7,
    s2_pic19: s_linePicL2_8,
    s2_pic20: s_linePicL2_9,
    s2_pic21: s_linePicL2_10,
    s2_pic22: s_linePicL2_11,
    s2_pic23: s_linePicL2_12,
    s2_pic24: s_linePicL2_13,
    s2_pic25: s_linePicL2_14,
    s2_pic26: s_linePicL2_15,
    s2_pic27: s_linePicL2_16,
    s2_pic28: s_linePicL2_17,
    s2_pic29: s_linePicL2_18,
    s2_pic30: s_linePicL3_0
  };

  function picResize() {
    //  图一类
    //  一级数据产品
    if (!$(heatMapPicL1_1.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL1_1.resize, 0);
    }
    if (!$(heatMapPicL1_2.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL1_2.resize, 0);
    }
    if (!$(heatMapPicL1_3.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL1_3.resize, 0);
    }
    if (!$(heatMapPicL1_4.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL1_4.resize, 0);
    }
    if (!$(heatMapPicL1_5.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL1_5.resize, 0);
    }
    if (!$(heatMapPicL1_6.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL1_6.resize, 0);
    }
    if (!$(heatMapPicL1_7.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL1_7.resize, 0);
    }
    if (!$(heatMapPicL1_8.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL1_8.resize, 0);
    }
    if (!$(heatMapPicL1_9.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL1_9.resize, 0);
    }
    if (!$(heatMapPicL1_0.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL1_0.resize, 0);
    }
    //  二级数据产品
    if (!$(heatMapPicL2_0.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL2_0.resize, 0);
    }
    if (!$(heatMapPicL2_1.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL2_1.resize, 0);
    }
    if (!$(heatMapPicL2_2.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL2_2.resize, 0);
    }
    if (!$(heatMapPicL2_3.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL2_3.resize, 0);
    }
    if (!$(heatMapPicL2_4.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL2_4.resize, 0);
    }
    if (!$(heatMapPicL2_5.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL2_5.resize, 0);
    }
    if (!$(heatMapPicL2_6.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL2_6.resize, 0);
    }
    if (!$(heatMapPicL2_7.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL2_7.resize, 0);
    }
    if (!$(heatMapPicL2_8.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL2_8.resize, 0);
    }
    if (!$(heatMapPicL2_9.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL2_9.resize, 0);
    }
    if (!$(heatMapPicL2_10.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL2_10.resize, 0);
    }
    if (!$(heatMapPicL2_11.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL2_11.resize, 0);
    }
    if (!$(heatMapPicL2_12.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL2_12.resize, 0);
    }
    if (!$(heatMapPicL2_13.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL2_13.resize, 0);
    }
    if (!$(heatMapPicL2_14.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL2_14.resize, 0);
    }
    if (!$(heatMapPicL2_15.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL2_15.resize, 0);
    }
    if (!$(heatMapPicL2_16.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL2_16.resize, 0);
    }
    if (!$(heatMapPicL2_17.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL2_17.resize, 0);
    }
    if (!$(heatMapPicL2_18.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL2_18.resize, 0);
    }
    //  三级数据产品
    if (!$(heatMapPicL3_0.getDom()).is(":hidden")) {
      setTimeout(heatMapPicL3_0.resize, 0);
    }

    //  图二类
    //  一级数据产品
    if (!$(s_heatMapPicL1_1.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL1_1.resize, 0);
    }
    if (!$(s_heatMapPicL1_2.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL1_2.resize, 0);
    }
    if (!$(s_heatMapPicL1_3.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL1_3.resize, 0);
    }
    if (!$(s_heatMapPicL1_4.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL1_4.resize, 0);
    }
    if (!$(s_heatMapPicL1_5.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL1_5.resize, 0);
    }
    if (!$(s_heatMapPicL1_6.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL1_6.resize, 0);
    }
    if (!$(s_heatMapPicL1_7.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL1_7.resize, 0);
    }
    if (!$(s_heatMapPicL1_8.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL1_8.resize, 0);
    }
    if (!$(s_heatMapPicL1_9.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL1_9.resize, 0);
    }
    if (!$(s_heatMapPicL1_0.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL1_0.resize, 0);
    }

    if (!$(s_linePicL1_1.getDom()).is(":hidden")) {
      setTimeout(s_linePicL1_1.resize, 0);
    }
    if (!$(s_linePicL1_2.getDom()).is(":hidden")) {
      setTimeout(s_linePicL1_2.resize, 0);
    }
    if (!$(s_linePicL1_3.getDom()).is(":hidden")) {
      setTimeout(s_linePicL1_3.resize, 0);
    }
    if (!$(s_linePicL1_4.getDom()).is(":hidden")) {
      setTimeout(s_linePicL1_4.resize, 0);
    }
    if (!$(s_linePicL1_5.getDom()).is(":hidden")) {
      setTimeout(s_linePicL1_5.resize, 0);
    }
    if (!$(s_linePicL1_6.getDom()).is(":hidden")) {
      setTimeout(s_linePicL1_6.resize, 0);
    }
    if (!$(s_linePicL1_7.getDom()).is(":hidden")) {
      setTimeout(s_linePicL1_7.resize, 0);
    }
    if (!$(s_linePicL1_8.getDom()).is(":hidden")) {
      setTimeout(s_linePicL1_8.resize, 0);
    }
    if (!$(s_linePicL1_9.getDom()).is(":hidden")) {
      setTimeout(s_linePicL1_9.resize, 0);
    }
    if (!$(s_linePicL1_0.getDom()).is(":hidden")) {
      setTimeout(s_linePicL1_0.resize, 0);
    }

    //  二级数据产品
    if (!$(s_heatMapPicL2_0.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL2_0.resize, 0);
    }
    if (!$(s_heatMapPicL2_1.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL2_1.resize, 0);
    }
    if (!$(s_heatMapPicL2_2.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL2_2.resize, 0);
    }
    if (!$(s_heatMapPicL2_3.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL2_3.resize, 0);
    }
    if (!$(s_heatMapPicL2_4.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL2_4.resize, 0);
    }
    if (!$(s_heatMapPicL2_5.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL2_5.resize, 0);
    }
    if (!$(s_heatMapPicL2_6.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL2_6.resize, 0);
    }
    if (!$(s_heatMapPicL2_7.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL2_7.resize, 0);
    }
    if (!$(s_heatMapPicL2_8.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL2_8.resize, 0);
    }
    if (!$(s_heatMapPicL2_9.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL2_9.resize, 0);
    }
    if (!$(s_heatMapPicL2_10.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL2_10.resize, 0);
    }
    if (!$(s_heatMapPicL2_11.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL2_11.resize, 0);
    }
    if (!$(s_heatMapPicL2_12.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL2_12.resize, 0);
    }
    if (!$(s_heatMapPicL2_13.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL2_13.resize, 0);
    }
    if (!$(s_heatMapPicL2_14.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL2_14.resize, 0);
    }
    if (!$(s_heatMapPicL2_15.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL2_15.resize, 0);
    }
    if (!$(s_heatMapPicL2_16.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL2_16.resize, 0);
    }
    if (!$(s_heatMapPicL2_17.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL2_17.resize, 0);
    }
    if (!$(s_heatMapPicL2_18.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL2_18.resize, 0);
    }

    if (!$(s_linePicL2_0.getDom()).is(":hidden")) {
      setTimeout(s_linePicL2_0.resize, 0);
    }
    if (!$(s_linePicL2_1.getDom()).is(":hidden")) {
      setTimeout(s_linePicL2_1.resize, 0);
    }
    if (!$(s_linePicL2_2.getDom()).is(":hidden")) {
      setTimeout(s_linePicL2_2.resize, 0);
    }
    if (!$(s_linePicL2_3.getDom()).is(":hidden")) {
      setTimeout(s_linePicL2_3.resize, 0);
    }
    if (!$(s_linePicL2_4.getDom()).is(":hidden")) {
      setTimeout(s_linePicL2_4.resize, 0);
    }
    if (!$(s_linePicL2_5.getDom()).is(":hidden")) {
      setTimeout(s_linePicL2_5.resize, 0);
    }
    if (!$(s_linePicL2_6.getDom()).is(":hidden")) {
      setTimeout(s_linePicL2_6.resize, 0);
    }
    if (!$(s_linePicL2_7.getDom()).is(":hidden")) {
      setTimeout(s_linePicL2_7.resize, 0);
    }
    if (!$(s_linePicL2_8.getDom()).is(":hidden")) {
      setTimeout(s_linePicL2_8.resize, 0);
    }
    if (!$(s_linePicL2_9.getDom()).is(":hidden")) {
      setTimeout(s_linePicL2_9.resize, 0);
    }
    if (!$(s_linePicL2_10.getDom()).is(":hidden")) {
      setTimeout(s_linePicL2_10.resize, 0);
    }
    if (!$(s_linePicL2_11.getDom()).is(":hidden")) {
      setTimeout(s_linePicL2_11.resize, 0);
    }
    if (!$(s_linePicL2_12.getDom()).is(":hidden")) {
      setTimeout(s_linePicL2_12.resize, 0);
    }
    if (!$(s_linePicL2_13.getDom()).is(":hidden")) {
      setTimeout(s_linePicL2_13.resize, 0);
    }
    if (!$(s_linePicL2_14.getDom()).is(":hidden")) {
      setTimeout(s_linePicL2_14.resize, 0);
    }
    if (!$(s_linePicL2_15.getDom()).is(":hidden")) {
      setTimeout(s_linePicL2_15.resize, 0);
    }
    if (!$(s_linePicL2_16.getDom()).is(":hidden")) {
      setTimeout(s_linePicL2_16.resize, 0);
    }
    if (!$(s_linePicL2_17.getDom()).is(":hidden")) {
      setTimeout(s_linePicL2_17.resize, 0);
    }
    if (!$(s_linePicL2_18.getDom()).is(":hidden")) {
      setTimeout(s_linePicL2_18.resize, 0);
    }

    //  三级数据产品
    if (!$(s_heatMapPicL3_0.getDom()).is(":hidden")) {
      setTimeout(s_heatMapPicL3_0.resize, 0);
    }
    if (!$(s_linePicL3_0.getDom()).is(":hidden")) {
      setTimeout(s_linePicL3_0.resize, 0);
    }

  }

  window.addEventListener("resize", picResize);

  //  添加拖动
  for (let i = 1; i <= 30; i++) {
    lineMove(echarts.init(document.getElementById('s2_pic' + i)), i);
  }


  // 中间区域各 container 和 左侧控制条目
  let $middle = $("#middle"), $right = $("#right"),
    $lidarContainer = $("#lidarContainer"),
    $btnProductionBack = $("#btnProductionBack"),
    $lidarContainerMulti = $("#lidarContainerMulti"),
    picShow = [true, true, true, true, true, true, true, true, true, true, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false,
      false, false],
    domPic = [];
  for (let i = 1; i <= 30; i++) {
    domPic[domPic.length] = document.getElementById(`pic${i}`);
  }
  // function: 中间图片 container 显示/隐藏，自适应大小
  let showPicContainer = () => {
    let num = 0;
    picShow.forEach((show, index) => {
      if (show) {
        num++;
      }
      domPic[index].parentElement.style.display = show ? "" : "none";
    });
    Array.from($middle[0].classList).some(c => {
      if (c.startsWith("show")) {
        $middle[0].classList.remove(c);
        return true;
      }
    });
    $middle[0].classList.add(num > 6 ? "showMulti" : `show${num}`);
    picResize();
  };
  // function: 更新左侧条目 active 状态
  let updateButtonActive = () => {
    // 遍历 picShow 然后给左侧对应条目加/删 active 类
    if (!picShow.slice(0, 10).some(show => show)) {
      $lidarContainer.children("div").eq(0).removeClass("active");
    } else {
      $lidarContainer.children("div").eq(0).addClass("active");
    }

    if (!picShow.slice(10, 15).some(show => show)) {
      $lidarContainerMulti.children("div").eq(0).removeClass("active");
    } else {
      $lidarContainerMulti.children("div").eq(0).addClass("active");
    }

    if (!picShow.slice(15, 20).some(show => show)) {
      $lidarContainerMulti.children("div").eq(1).removeClass("active");
    } else {
      $lidarContainerMulti.children("div").eq(1).addClass("active");
    }

    if (!picShow.slice(20, 22).some(show => show)) {
      $lidarContainerMulti.children("div").eq(2).removeClass("active");
    } else {
      $lidarContainerMulti.children("div").eq(2).addClass("active");
    }

    if (!picShow.slice(22, 26).some(show => show)) {
      $lidarContainerMulti.children("div").eq(3).removeClass("active");
    } else {
      $lidarContainerMulti.children("div").eq(3).addClass("active");
    }

    if (!picShow.slice(26, 27).some(show => show)) {
      $lidarContainerMulti.children("div").eq(4).removeClass("active");
    } else {
      $lidarContainerMulti.children("div").eq(4).addClass("active");
    }

    if (!picShow.slice(27, 29).some(show => show)) {
      $lidarContainerMulti.children("div").eq(5).removeClass("active");
    } else {
      $lidarContainerMulti.children("div").eq(5).addClass("active");
    }

    if (!picShow.slice(27, 29).some(show => show)) {
      $lidarContainerMulti.children("div").eq(5).removeClass("active");
    } else {
      $lidarContainerMulti.children("div").eq(5).addClass("active");
    }

    if (!picShow.slice(29, 30).some(show => show)) {
      $lidarContainer.children("div").eq(2).removeClass("active");
    } else {
      $lidarContainer.children("div").eq(2).addClass("active");
    }
  };
  // 左侧一级菜各个条目点击事件
  $lidarContainer.on("click", ">div", function () {
    let parentNode = this.parentNode;
    Array.from(parentNode.children).forEach(div => div.classList.remove("active"));
    switch ($(this).index()) {
      case 0: // 点击“雷达定标产品”按钮
        this.classList.add("active");
        picShow =
          [true, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false,
            false,
            false, false];
        showPicContainer();
        break;
      case 1: // 点击“一级数据产品”按钮
        this.classList.add("active");
        picShow =
          [false, true, true, true, true, true, true, true, true, true, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false,
            false, false];
        showPicContainer();
        break;
      case 2: // 点击“二级数据产品”按钮，弹出二级菜单
        parentNode.style.display = "none";
        parentNode.nextElementSibling.style.display = "block";
        // parentNode.previousElementSibling.style.background = "linear-gradient(to bottom, #d4d4d4, #acacac, #d4d4d4)";
        parentNode.previousElementSibling.firstElementChild.style.display = "block";
        picShow =
          [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false,
            false, false, false];
        showPicContainer();
        break;
      case 3: // 点击“三级数据产品”按钮
        this.classList.add("active");
        picShow =
          [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false,
            false, false, true];
        showPicContainer();
        break;
    }
  });
  // 左侧二级菜单弹出后返回按钮点击事件
  $btnProductionBack.on("click", () => {  // 点击“二级数据产品”按钮后弹出菜单的返回键
    $lidarContainerMulti.hide();    // 二级菜单隐藏
    $lidarContainer.show().prev();
    // $btnProductionBack.hide();  // 自己隐藏
    $lidarContainerMulti.children("div").removeClass("active");
    picShow =
      [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false,
        false, false, false];
    showPicContainer();
  });
  // 左侧二级菜单各个条目点击事件
  $lidarContainerMulti.on("click", ">div", function () {
    // 点击“二级数据产品”按钮后弹出菜单里面的条目
    this.classList.toggle("active");
    switch ($(this).index()) {
      case 0: // 后向散射系数
        for (let i = 10; i < 15; i++) {
          picShow[i] = !picShow[i];
        }
        break;
      case 1: // 消光系数
        for (let i = 15; i < 20; i++) {
          picShow[i] = !picShow[i];
        }
        break;
      case 2: // 退偏比
        for (let i = 20; i < 22; i++) {
          picShow[i] = !picShow[i];
        }
        break;
      case 3: // 颜色比
        for (let i = 22; i < 26; i++) {
          picShow[i] = !picShow[i];
        }
        break;
      case 4: // 水汽混合比
        for (let i = 26; i < 27; i++) {
          picShow[i] = !picShow[i];
        }
        break;
      case 5: // 激光雷达比
        for (let i = 27; i < 29; i++) {
          picShow[i] = !picShow[i];
        }
        break;
    }
    showPicContainer();
  });
  // 中键图片标题栏各个按钮点击事件
  $middle.on("click", ".mapTitleContainer > div", function () {
    // 带 id 的 jquery 元素：$(this).parent().next()
    let $this = $(this);
    switch ($this.index()) {
      case 5: // 刷新按钮
        break;
      case 4: // 好像是一个图变俩图。
        let $pic = $(this).parent().next();
        if (this.classList.contains("kuoxian")) {
          this.classList.remove("kuoxian");
          $pic.show();
          $pic.next().hide().next().hide();
        } else {
          this.classList.add("kuoxian");
          $pic.hide();
          $pic.next().show().next().show();
        }
        // s_linePicL1_1.setOption({
        //     graphic: {
        //         position: [s_linePicL1_1.convertToPixel({xAxisId: 'lineXPosition'}, firstPosition), 0],  //
        //     },
        // });

        setTimeout(echartsObj["" + this.parentNode.nextElementSibling.getAttribute('id')].resize, 0);
        setTimeout(echartsObj["" + this.parentNode.nextElementSibling.nextElementSibling.getAttribute('id')].resize, 0);
        setTimeout(echartsObj["" + this.parentNode.nextElementSibling.nextElementSibling.nextElementSibling.getAttribute('id')].resize, 0);
        // picResize();
        break;
      case 3: // 全屏
        if (this.classList.contains("mapFullscreen")) {
          this.classList.remove("mapFullscreen");
          this.parentElement.parentElement.style.width = "";
          this.parentElement.parentElement.style.height = "";
          this.parentElement.parentElement.style.position = "";
          this.parentElement.parentElement.style.top = "";
          this.parentElement.parentElement.style.left = "";
          this.parentElement.parentElement.style.zIndex = "";
          $middle[0].style.overflow = "";
          echarts.init(document.getElementById(this.parentNode.nextElementSibling.getAttribute('id'))).setOption({
            visualMap: [{
              itemHeight: 200
            }]
          });
          echarts.init(document.getElementById(this.parentNode.nextElementSibling.nextElementSibling.getAttribute('id'))).setOption({
            visualMap: [{
              itemHeight: 200
            }]
          });
        } else {
          this.classList.add("mapFullscreen");
          this.parentElement.parentElement.style.width = "100%";
          this.parentElement.parentElement.style.height = "100%";
          this.parentElement.parentElement.style.position = "absolute";
          this.parentElement.parentElement.style.top = "0";
          this.parentElement.parentElement.style.left = "0";
          this.parentElement.parentElement.style.zIndex = "99";
          $middle[0].style.overflow = "hidden";
          echarts.init(document.getElementById(this.parentNode.nextElementSibling.getAttribute('id'))).setOption({
            visualMap: [{
              itemHeight: 800
            }]
          });
          echarts.init(document.getElementById(this.parentNode.nextElementSibling.nextElementSibling.getAttribute('id'))).setOption({
            visualMap: [{
              itemHeight: 800
            }]
          });
        }
        setTimeout(echartsObj["" + this.parentNode.nextElementSibling.getAttribute('id')].resize, 0);
        setTimeout(echartsObj["" + this.parentNode.nextElementSibling.nextElementSibling.getAttribute('id')].resize, 0);
        setTimeout(echartsObj["" + this.parentNode.nextElementSibling.nextElementSibling.nextElementSibling.getAttribute('id')].resize, 0);
        // picResize();
        break;
      case 2: // 关闭按钮
        this.classList.remove("mapFullscreen");
        this.parentElement.parentElement.style.width = "";
        this.parentElement.parentElement.style.height = "";
        this.parentElement.parentElement.style.position = "";
        this.parentElement.parentElement.style.top = "";
        this.parentElement.parentElement.style.left = "";
        this.parentElement.parentElement.style.zIndex = "";
        $middle[0].style.overflow = "";
        let $container = $this.parent().parent();
        picShow[$container.index()] = false;
        showPicContainer();
        updateButtonActive();
        break;
    }
  });
  // 右侧表格区伸缩按钮点击事件
  $("#btnCollapse").on("click", function () {
    if (!this.classList.contains("btnExpand")) {
      let width = 60;
      $right.children().hide();
      this.style.display = "";
      let i = setInterval(() => {
        $middle.css("width", `${width += 0.5}%`);
        $right.css("width", `${80 - width}%`);
        if (width >= 78) {
          clearInterval(i);
          this.classList.add("btnExpand");
          setTimeout(picResize, 5);
        }
      }, 5);
    } else {
      let width = 78;
      let i = setInterval(() => {
        $middle.css("width", `${width -= 0.5}%`);
        $right.css("width", `${80 - width}%`);
        if (width === 60) {
          clearInterval(i);
          this.classList.remove("btnExpand");
          $right.children().show();
          setTimeout(picResize, 5);
        }
      }, 5);
    }
  });
  // 文件列表
  let $fileList = $("#fileList"),
    currentFileName = "",
    nowDate = new Date(),
    searchMessage = {
      siteName: "changchun",
      dateRange: [{year: 2020, month: 1, date: 1}, {
        year: Number(nowDate.getFullYear()),
        month: Number(nowDate.getMonth()) + 1,
        date: Number(nowDate.getDate())
      }]
    },
    dateRange = [{year: 2020, month: 1, date: 1}, {
      year: Number(nowDate.getFullYear()),
      month: Number(nowDate.getMonth()) + 1,
      date: Number(nowDate.getDate())
    }];
  laydate.render({
    elem: '#dateStart',
    calendar: true,
    theme: 'molv',
    format: "yyyy/MM/dd",   // 格式
    value: `${searchMessage.dateRange[0].year.toString().padStart(4, "0")}/${searchMessage.dateRange[0].month.toString().padStart(2, "0")}/${searchMessage.dateRange[0].date.toString()
      .padStart(2, "0")}`,    // 初始值
    btns: ['now', 'confirm'],
    done(value, date) {
      searchMessage.dateRange[0] = date;
    }
  });
  laydate.render({
    elem: '#dateEnd',
    calendar: true,
    theme: 'molv',
    format: "yyyy/MM/dd",   // 格式
    value: `${searchMessage.dateRange[1].year.toString().padStart(4, "0")}/${searchMessage.dateRange[1].month.toString().padStart(2, "0")}/${searchMessage.dateRange[1].date.toString()
      .padStart(2, "0")}`,    // 初始值
    btns: ['now', 'confirm'],
    done(value, date) {
      searchMessage.dateRange[1] = date;
    }
  });
  // 文件列表搜索按钮点击事件
  $("#search").on("click", () => {
    $fileList.empty().append("<tr><td>Searching</td></tr>");
    // 产品数据里面的搜索
    $.ajax({
      type: "POST",
      url: getContextPath() + "/control/search",
      contentType: 'application/json;charset=utf-8',
      data: JSON.stringify(searchMessage),
      success(fileList) {
        if (Array.isArray(fileList) && fileList.length !== 0) {
          $fileList.empty();
          fileList.reverse().forEach(file => $fileList.append(`<tr><td style="background-image: url(../images/newWeather/qing.png)"/><td>${file}</td></tr>`));
          $fileList.children().eq(0).addClass("active");
          currentFileName = $fileList.find("td").eq(0).text();
          updateShowPic();
        } else {
          $fileList.empty().append("<tr><td>No File</td></tr>");
        }
      },
      error() {
        $fileList.empty().append("<tr><td>Fail To Get File</td></tr>");
      }
    });
  }).click();
  // 文件列表点击事件
  $fileList.on("click", "tr", function () {
    currentFileName = this.firstElementChild.textContent;
    $fileList.children().removeClass("active");
    this.classList.add("active");
    updateShowPic();
  });
  // 根据 currentFileName 获取三十个文件结果，绘制三十张图
  let updateShowPic = () => {
    if (currentFileName === "") {
      return;
    }
    $.ajax({
      type: "POST",
      url: getContextPath() + "/control/getPicData",
      contentType: 'text/plain',
      data: JSON.stringify({
        siteName: selectedSiteName,
        date: currentFileName
      }),
      success(data) {
        // TODO: 获取到三十个文件结果，更新绘图数据
        // let jsonData = JSON.parse(data[0]);
        heatMapData.length = 0;
        /*for (let i = 1; i <= 3; i++) {
         setTimeout(function () {
         let jsonData = JSON.parse(data[i - 1]);
         echarts.init(document.getElementById('pic' + i)).setOption({
         series: [{
         data: changeData(jsonData.allData, jsonData.firstRowData),
         }, {}]
         });
         echarts.init(document.getElementById('s1_pic' + i)).setOption({
         series: [{
         data: changeData(jsonData.allData, jsonData.firstRowData),
         }]
         });
         heatMapData.push(changeData(jsonData.allData, jsonData.firstRowData));
         }, 0)
         }*/
        for (let i = 1; i <= 3; i++) {
          setTimeout(function () {
            let jsonData = JSON.parse(data[i - 1]);
            echarts.init(document.getElementById('pic' + i)).setOption({
              series: [{
                data: jsonData
              }]
            });
            echarts.init(document.getElementById('s1_pic' + i)).setOption({
              series: [{
                data: jsonData
              }]
            });
            heatMapData.push(jsonData);
          }, 0);
        }
      },
      error() {
        console.log("fail");
      }
    });
  };

  //  登陆
  /* $("#loginClose").on("click", () => {
   $("#loginBox").hide();
   })

   $("#pic").on("click", () => {
   $("#loginBox").show()
   })

   $("#loginBtn").on("click", () => {
   $("#loginBox").hide();
   })*/

  //  左上角功能
  setInterval(function () { //  时间
    $('.weatherTime > div:nth-child(1)>p:nth-child(1)').text(getTime());
    $('.weatherTime > div:nth-child(1)>p:nth-child(2)').text(getDate());
  }, 1000);

  getWeather('长春', 'weather_cc_', 'pic_cc_', 1);  //  默认天气
  //  下拉框功能
  var selectedSiteName = "changchun";
  $("#selectBox").on("change", function () {
    let provinceName = ["长春", "大连", "石家庄", "包头", "青海湖", "南通", "广州", "南宁", "呼伦贝尔", "敦煌"];
    getWeather(provinceName[$(this).val()], 'weather_cc_', 'pic_cc_', 1);
    let obj = {
      provinceName: provinceName[$(this).val()],
      siteName: "704所",
      siteNumber: "Z0001",
      lidarType: "YCCR",
      altitude: "380米",
      siteLon: "E116°18′40.00″",
      siteLat: "N40°4′30.00″"
    };
    getMessage(obj);
    switch (Number($(this).val())) {
      case 0:
        selectedSiteName = "changchun";
        searchMessage.siteName = "changchun";
        break;
      case 1:
        selectedSiteName = "dalian";
        searchMessage.siteName = "dalian";
        break;
      case 2:
        selectedSiteName = "shijiazhuang";
        searchMessage.siteName = "shijiazhuang";
        break;
      case 3:
        selectedSiteName = "baotou";
        searchMessage.siteName = "baotou";
        break;
      case 4:
        selectedSiteName = "qinghaihu";
        searchMessage.siteName = "qinghaihu";
        break;
      case 5:
        selectedSiteName = "nantong";
        searchMessage.siteName = "nantong";
        break;
      case 6:
        selectedSiteName = "guangzhou";
        searchMessage.siteName = "guangzhou";
        break;
      case 7:
        selectedSiteName = "nanning";
        searchMessage.siteName = "nanning";
        break;
      case 8:
        selectedSiteName = "hulunbeier";
        searchMessage.siteName = "hulunbeier";
        break;
      case 9:
        selectedSiteName = "dunhuang";
        searchMessage.siteName = "dunhuang";
        break;
    }
    console.log(selectedSiteName);
  });

  // 右侧信息
  getMessage({
    provinceName: "北京",
    siteName: "704所",
    siteNumber: "Z0001",
    lidarType: "YCCR",
    altitude: "380米",
    siteLon: "E116°18′40.00″",
    siteLat: "N40°4′30.00″"
  });
});